<template>
  <div class="three-boxs" id="three3-boxs">
    <!-- v-if="props.moduleLists.length > 0" -->
    <t-radio-group v-model="radioValue" @change="onChange">
      <el-tree
        ref="tree"
        :data="props.moduleLists"
        activable
        transition
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :props="threeKeys"
        :highlight-current="true"
        node-key="id"
        @node-click="Active"
        :default-expanded-keys="defaultExpandKeys"
      >
        <template #default="{ node }">
          <div
            style="flex: 1"
            class="default-box"
            @click="store.contextmenuchildId !== node.data.id ? (radioValue = node.data.id) : false"
          >
            <p
              v-if="node.data.text.length < 8"
              class="three-title"
              :style="{ width: node.data.level === 1 ? '170px' : node.data.level === 2 ? '150px' : '114px' }"
            >
              {{ node.data.text }}
            </p>
            <t-popup
              v-else
              attach="#three3-boxs"
              overlayClassName="popup"
              class="placement top"
              :content="node.data.text"
              placement="top"
              showArrow
              destroyOnClose
            >
              <p
                class="three-title"
                :style="{ width: node.data.level === 1 ? '170px' : node.data.level === 2 ? '150px' : '114px' }"
              >
                {{ node.data.text }}
              </p>
            </t-popup>
            <div>
              <t-radio :value="node.data.id" :disabled="store.contextmenuchildId === node.data.id"></t-radio>
            </div>
          </div>
        </template>
      </el-tree>
    </t-radio-group>
  </div>
</template>

<script setup lang="ts" name="itemView">
// @ts-nocheck

import { Alert, MessagePlugin } from 'tdesign-vue-next';
import { disableSort, moduleDelete, moduleSave, moduleList, moveModule } from '@/api/desgin/desgin';
import { ref, reactive, nextTick, defineExpose, watch, onMounted } from 'vue';

import { useProjectStore } from '@/store';
import { findIndex } from 'lodash';
// import {  ElTree } from 'element-plus';
const emit = defineEmits(['editItem', 'updateList', 'emitDel', 'emitRadio']);
const tree = ref(null);
const actived = ref(0);
const delId = ref(0);
const visibleMessage = ref(false);
const parentId = ref(0);
const visible = ref(false); //添加辅助信息弹框
const loading = ref(false);
const valueList = ref([]);
const threeKeys = {
  value: 'id',
  label: 'text',
  children: 'children',
  key: 'id',
};
const defaultExpandKeys: any = ref([-1]);
let dragFlag = false;
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  // console.log('----------------', draggingNode, dropNode, type);

  // console.log(dropNode.parent.childNodes.length, dropNode.level);
  // console.log(draggingNode, type);

  let flag = false; // 默认设置为 false

  flag = draggingNode.data.children.some((thirdLevel) => {
    return thirdLevel.children.length > 0;
  });
  // console.log(flag, dropNode.level, draggingNode.data.children);
  // console.log(flag, '---');

  if (
    (dropNode.level === 3 && type === 'inner') ||
    (dropNode.level === 2 && type === 'inner' && draggingNode.data.children.length > 0) ||
    (dropNode.level === 3 && draggingNode.data.children.length > 0) ||
    (dropNode.level >= 2 && flag) ||
    (dropNode.level === 1 && type === 'inner' && flag) ||
    dropNode.parent.childNodes.length > 15
  ) {
    // console.log('判断进入', dropNode.parent.childNodes.length);
    // alert('判断进入')
    return false;
  } else {
    // console.log('可以拖拽');
    return true;
  }
};
const allowDrag = (draggingNode: Node) => {
  // console.log(draggingNode, 'draggingNode');

  return draggingNode.data.id;
};
const radioValue = ref(-1);
const store = useProjectStore();
const value = ref(0);
const auxiliaryInfo = reactive({
  id: 0,
  name: '',
  description: '',
  coverUrl: '',
  parentId: 0,
  audio: {
    type: 3,
    url: '',
    description: '',
    name: '',
  },
  video: {
    type: 4,
    url: '',
    description: '',
    name: '',
  },
});

const childclick = () => {};
const clock = () => {};
const moveItem = reactive({
  info: null,
});
const props = defineProps({
  moduleLists: {
    type: Array,
  },
  ids: {
    type: Number,
  },
  parentId: {
    type: Number,
  },
  level: {
    type: Number,
  },
});
onMounted(() => {});
const Active = (data) => {
  // value.value = value[0] ? value[0] : 0;
  // actived.value = data.id;
  // // valueList
  // if (data.id) {
  //   nextTick(() => {
  //     let parentId = data.parentId; //获取指定节点父节点
  //     emit('editItem', data.id, parentId);
  //   });
  // }
  // getItemAll();
};
const getItemAll = (e) => {
  if (e && e[0]) {
    actived.value = e[0];
  }
};

watch(
  () => props.moduleLists,
  () => {},
  { deep: true },
);

const onChange = (checkedValues) => {
  // console.log('checkedValues:', radioValue.value, checkedValues);
  emit('emitRadio', radioValue.value);
};

const updataSort = async (parentId, sort, flag?: boolean) => {
  try {
  } catch {}
};
</script>

<style lang="less" scoped>
.three-boxs {
  width: 100%;
  :deep(.el-tree) {
    width: 100%;
  }
  :deep(.el-tree-node__content) {
    position: relative;
    z-index: 3;
    height: 44px;
  }
  :deep(.el-tree-node__expand-icon) {
    margin-left: 24px;
    width: 16px;
    height: 16px;
    svg {
      width: 16px;
      height: 16px;
    }
    // padding: 0 24px !important;
  }
  :deep(.el-tree-node__content:hover) {
    z-index: 1;
  }
  :deep(.el-tree-node__content) {
    position: relative;
    z-index: 3;
    height: 44px;
  }
  :deep(.el-tree-node__content:hover) {
    z-index: 1;
  }
}
:deep(.t-radio-group) {
  width: 100%;
}
.three-boxs-active {
  :deep(.el-tree-node__content) {
    position: relative;
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
  :deep(.el-tree-node__content:hover) {
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
}
@keyframes coverMove {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 1;
  }
  90% {
    z-index: 1;
  }
  100% {
    z-index: 666;
  }
}
:deep(.el-tree-node__content--open) {
  background: #f5f5f5;
  .three-title {
    // color: #e62b17;
  }
}
:deep(.el-tree-node__content:hover) {
  background: #f0f0f0;
}
:deep(.t-is-active .el-tree__label) {
  background: transparent;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

:deep(.el-tree__operations) {
  position: relative;
}
:deep(.el-tree__icon) {
  margin-left: 20px;
  .doorIcon {
    transition: all 0.3s;
    font-size: 16px;
    color: RGBA(158, 158, 158, 1);
    transform: rotate(-90deg);
  }
}
:deep(.el-tree-node__content--open) {
  .el-tree__icon {
    .doorIcon {
      transform: rotate(0deg);
    }
  }
}
.editMenu {
  opacity: 0;
  position: relative;
  margin-right: 24px;
  z-index: 9999;
  width: 24px;
  height: 24px;
  // background: #d9d9d9;
  border-radius: 4px;

  .doorIcon {
    font-size: 24px;
    color: RGBA(134, 134, 134, 1);
  }
}
.editMenu:hover {
  background: #d9d9d9;
}
:deep(.t-is-active) {
  .editMenu:hover {
    background: #ffccbd;
  }
}
.editMenu-level {
  display: none;
  position: absolute;
  top: 0;
  right: -204px;
}
.editMenu-level-content {
  display: block;

  padding: 4px 0;
  background: #ffffff;
  z-index: 999;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
    0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  margin-left: 30px;
}
.editMenu-level-item {
  display: flex;
  align-items: center;
  width: 180px;
  height: 36px;
  background: #ffffff;
  padding: 0px 16px;
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  .editMenu-level-item-left-title {
    margin-left: 4px;
  }
}
.editMenu-level-item:hover {
  background: #f5f5f5;
}
.editMenu-level-item-1 {
  position: relative;
  .editMenu-level-item-left {
    .doorIcon {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 24px;
    }
  }
}
:deep(.el-tree-node__content:hover) {
  // height: 44px;
  .editMenu {
    opacity: 1 !important;
  }
}
.editMenu:hover {
  .editMenu-level {
    display: block;
    opacity: 1;
  }
}
.editMenu-child {
  display: none;
  position: absolute;
  top: 0;
  right: 0px;
  width: 184px;
  padding-left: 4px;
}
.editMenu-level-item-1:hover {
  .editMenu-child {
    display: block;
  }
  .editMenu-level2 {
    width: 180px;
    left: 180px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
  }
}
:deep(.t-is-active) {
  background: #ffece6 !important;
  .three-title {
    color: #e62b17;
  }
}
:deep(.el-tree__label) {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.three-title {
  // display: flex;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#three3-boxs {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    // width: 296px;
    font-size: 14px;
    padding: 4px 10px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

:deep(.el-tree__icon::after) {
  display: none;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background: rgba(230, 43, 23, 0.1) !important;
}
.addAuxiliary {
  :deep(.t-drawer__content-wrapper) {
    width: 720px !important;
  }
  :deep(.t-drawer__header) {
    padding: 20px 30px !important;
  }
  :deep(.t-drawer__body) {
    padding: 0 !important;
  }
  :deep(.narrow-scrollbar) {
    scrollbar-width: none !important;
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}
.addAuxiliary-move {
  :deep(.t-drawer__content-wrapper) {
    width: 420px !important;
  }
}
:deep(.el-tree-node__children) {
  overflow: visible !important;
}
:deep(.el-tree__drop-indicator) {
  background: #e62b17 !important;
  z-index: 99;
}
.doorIcon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
  opacity: 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.38);
}
.doorIcon-mg {
  left: -36px;
}
.el-tree-node__content:hover {
  .doorIcon {
    opacity: 1;
  }
}
.default-box {
  position: relative; 
  display: flex; 
  align-items: center;
  justify-content: space-between;
  margin-right: 4px;
}
:deep(.t-is-disabled) {
  .t-radio__input {
    border-color: rgba(0, 0, 0, 0.26) !important ;
  background: transparent;
  }
  .t-radio__input::after {
    background: rgba(0, 0, 0, 0.26) !important;
    opacity: 1;
  }
}
</style>
